<template>
  <div>
      <link rel="stylesheet" href="http://at.alicdn.com/t/font_2293181_6mnh0u002f4.css">
    <div class="banner">
      <div class="mk_foot">
        <p>
          <i class="iconfont icon-fangdajing">
            <input
              type="text"
              placeholder="客观您要搜点什么？"
              v-model="search"
              @change="sear"
          /></i>
        </p>
        <b @click="fh()">取消</b>
      </div>
    </div>
    <div class="resou">
      <h4>热搜</h4>
      <ul class="lishi">
        <li v-for="item in list_start" :key="item.id">
          <span>{{ item.title }}</span>
        </li>
      </ul>
    </div>
    

    <ul>
        <h5 class="h5">历史搜索<i class="iconfont icon-shanchu  hhh" @click="del()"></i></h5>
      <li v-for="item in listtodo" :key="item.id">{{ item }}</li>
      
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      search: "",
      listtodo: [],
      list_start: [],
      list: JSON.parse(localStorage.getItem("list")) || [],
    };
  },
  watch: {
    list: {
      handler() {
        this.list_start = this.list.filter((item) => item);
        localStorage.setItem("list", JSON.stringify(this.list));
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    fh() {
      this.$router.history.go(-1);
    },
    // sear() {
    //   if (this.search == "") {
    //     alert("输入不能为空");
    //   } else {
    //     this.list.unshift({
    //       id: Date.now(),
    //       text: this.search,
    //       isCheck: false,
    //     });
    //     this.search = "";
    //   }
    // },
    sear() {
        if(this.search == ""){
            alert("输入不能为空")
        }else{
        this.listtodo.push(this.search);
      // console.log(this.listtodo,'ss')
      axios({
        url: "http://192.168.9.24:3000/articles?q=" + this.search,
      }).then((res) => {
        // console.log(this.search, "search");
        // console.log(res);
        this.list_start = res.data;
      });
        }
    
    },
    del() {
      this.listtodo = [];
    },
  },
};
</script>

<style scoped>
.mk_foot b {
  width: 30px;
  margin-top: 10px;
  float: left;
  margin-left: 1px;
}
.mk_foot p {
  width: 88%;
  height: 35px;
  float: left;
  background: #f1f1f1;
  border-radius: 20px;
  margin-left: 10px;
  margin-top: 5px;
}
.mk_foot input {
  border: 0;
  outline: none;
  width: 90%;
  height: 34px;
  background: #f1f1f1;
}

.mk_foot {
  width: 100%;
  height: 40px;
  font-size: 10px;
}
.banner {
  width: 100%;
  height: 50px;
  overflow: hidden;
  border-bottom: 1px solid #f1f1f1;
}
.mk_inpu i {
  margin-left: 5px;
}

.resou {
  width: 100%;
  /* height: 40px; */

  border-bottom: 15px solid #f1f1f1;
}
.resou h4 {
  margin: 10px;
}
.lishi {
  /* position: relative; */
  width: 100%;
  /* height: 50px; */
  /* margin-left: 20px; */
  border-bottom: 2px solid #f1f1f1;
  list-style: none;
}
.h5 {
  width: 100%;
  height: 20px;
  border-bottom: 2px solid #f1f1f1;
  /* position: relative; */
}
.hhh{
    float: right;
    margin-right: 10px;
    font-size: 20px;
}

</style>
